<!-- 图表统计 -->
<template>
  <div>
    <el-tabs lazy v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(tab, index) in tabsList"
        :key="index"
        :label="tab.label"
        :name="tab.name"
      >
        <keep-alive :include="includesMap(tabsList)">
          <component :is="tab.component" v-if="tab.name == activeName" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import workOrderStatistics from "./parts/workOrderStatistics.vue";
import myMembers from "./parts/myMembers.vue";
import roleManagement from "./parts/roleManagement.vue";
import factoryWorkOrder from "./parts/factoryWorkOrder.vue";
import areaMaster from "./parts/areaMaster.vue";
import customerServiceProfit from "./parts/customerServiceProfit.vue";
import expenseApplicationStatistics from "./parts/expenseApplicationStatistics.vue";
import memberOperationLog from "./parts/memberOperationLog.vue";
import outletOrderStatistics from "./parts/outletOrderStatistics.vue";
import transferStatistics from "./parts/transferStatistics.vue";
export default {
  components: {
    workOrderStatistics,
    myMembers,
    roleManagement,
    factoryWorkOrder,
    customerServiceProfit,
    expenseApplicationStatistics,
    memberOperationLog,
    outletOrderStatistics,
    transferStatistics,
    areaMaster
  },
  data() {
    return {
      activeName: "workOrderStatistics",
      tabsList: [
        {
          label: "工单统计",
          name: "workOrderStatistics",
          component: "workOrderStatistics"
        },
        {
          label: "我的成员",
          name: "myMembers",
          component: "myMembers"
        },
        {
          label: "角色管理",
          name: "roleManagement",
          component: "roleManagement",
          keepAlive: true
        },
        {
          label: "区域师傅",
          name: "areaMaster",
          component: "areaMaster",
          keepAlive: true
        },
        {
          label: "工厂工单量",
          name: "factoryWorkOrder",
          component: "factoryWorkOrder",
          keepAlive: true
        },
        {
          label: "客服利润",
          name: "customerServiceProfit",
          component: "customerServiceProfit"
        },
        {
          label: "费用申请统计",
          name: "expenseApplicationStatistics",
          component: "expenseApplicationStatistics"
        },
        {
          label: "成员操作日志",
          name: "memberOperationLog",
          component: "memberOperationLog"
        },
        {
          label: "网点接单统计",
          name: "outletOrderStatistics",
          component: "outletOrderStatistics"
        },
        {
          label: "转单统计",
          name: "transferStatistics",
          component: "transferStatistics"
        }
      ]
    };
  },
  methods: {
    handleClick(pane) {
      console.log(pane, "点击");
    },
    /**
     * 筛选出需要进行缓存的组件
     * @param arr 数据集合
     */
    includesMap(arr) {
      return arr.map(item => {
        if (item.keepAlive) return item.component;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$wBgc: white;
$bRadius: 5px;
$ptb: 15px;
$p1: $ptb 25px;
$cardHeight: 350px;
$cardInnerHeight: calc(#{$cardHeight} - #{$ptb * 2});
@mixin box {
  padding: $p1;
  background-color: $wBgc;
  border-radius: $bRadius;
}

.el-tabs {
  margin-bottom: 0;
  :deep(.el-tabs__header) {
    margin-bottom: 0 !important;

    .el-tabs__nav-wrap {
      padding-left: 25px;
    }
  }
  :deep(.el-tabs__content) {
    // margin-top: 10px;
    min-height: 200px;
    // border: 1px solid #000;
    @include box();
  }

  :deep(.el-tabs__nav-wrap) {
    &::after {
      background-color: transparent;
    }

    .el-tabs__item {
      font-size: 17px;
      font-weight: bold;
      color: #4f535b;
      &.is-active {
        color: black;
      }
    }
  }
}

.el-tab-pane {
  height: 100%;
}
.card {
  // height: $cardInnerHeight;
}

.el-card {
  :deep(.el-card__body) {
    height: 100%;
  }
}
</style>
